import React, { useState } from "react";
import { themes, Theme } from "../themes/themes";
import { Link } from "react-router-dom";
import "./index.css";
import LeftVideo from "../LeftVideo/LeftVideo";
import RightButton from "../RightButton/RightButton";
import Danmaku from "../Danmaku/Danmaku";
import LeftSection from "../LeftSection/leftSection";

const ThemeSwitcher = () => {
  // 切换视频
  const [currentVideoIndex, setCurrentVideoIndex] = useState(0);
  const videos = ["src/videos/one.mp4", "src/videos/two.mp4"];
  const handleClick = () => {
    setCurrentVideoIndex((prevIndex) => (prevIndex === 0 ? 1 : 0));
  };

  // 主题切换
  const [currentTheme, setCurrentTheme] =
    useState<keyof typeof themes>("light");

  const toggleTheme = () => {
    const newTheme = currentTheme === "light" ? "dark" : "light";
    setCurrentTheme(newTheme);
    const root = document.documentElement;
    const theme: Theme = themes[newTheme];
    root.style.setProperty(
      "--background-image",
      `url(${theme.backgroundImage})`
    );
    root.style.setProperty("--box-color", theme.boxColor);
    root.style.setProperty("--text-color", theme.textColor);
  };

  // 弹幕相关
  const [danmakuText, setDanmakuText] = useState("");
  const [danmakuList, setDanmakuList] = useState<string[]>([]);

  const handleDanmakuSubmit = () => {
    if (danmakuText.trim() !== "") {
      setDanmakuList([...danmakuList, danmakuText]);
      setDanmakuText("");
    }
  };

  const handleDanmakuAnimationEnd = (index) => {
    const newDanmakuList = [...danmakuList];
    newDanmakuList.splice(index, 1);
    setDanmakuList(newDanmakuList);
  };

  return (
    <div>
      <button onClick={toggleTheme}>
        切换到 {currentTheme === "light" ? "暗色" : "亮色"} 主题
      </button>

      <Link to="/3d">
        <span className="Three">3D展览馆</span>
      </Link>
      <div className="Left">
        <LeftSection />
      </div>
      {/* 使用新的样式类包裹视频和弹幕输入框 */}
      <div className="video-and-danmaku">
        <div className="Righttop" style={{ position: "relative" }}>
          <LeftVideo videoSrc={videos[currentVideoIndex]} />
          <RightButton onClick={handleClick} />
          {/* 显示弹幕 */}
          <div className="danmaku-container">
            {danmakuList.map((text, index) => (
              <Danmaku
                key={index}
                text={text}
                onAnimationEnd={() => handleDanmakuAnimationEnd(index)}
              />
            ))}
          </div>
        </div>
        {/* 弹幕输入框和按钮 */}
        <div className="danmaku-input-container">
          <input
            type="text"
            value={danmakuText}
            onChange={(e) => setDanmakuText(e.target.value)}
            placeholder="输入弹幕内容"
          />
          <button onClick={handleDanmakuSubmit}>发布弹幕</button>
        </div>
      </div>
    </div>
  );
};

export default ThemeSwitcher;
